import inherits from 'inherits'
import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'
import {
    isObject,
    assign,
    forEach
} from 'min-dash';
import {
    append as svgAppend,
    create as svgCreate,
    classes as svgClasses
} from 'tiny-svg'

import {
    customElements,
    customConfig,
    hasLabelElements
} from './util'


export default function CustomRenderer(eventBus, styles, textRenderer) {

    //删除双击事件
    delete eventBus._listeners['element.dblclick']
    BaseRenderer.call(this, eventBus, 2000)
    var computeStyle = styles.computeStyle
    function renderLabel(parentGfx, label, options) {
        options = assign({
            size: {
                x: 0,
                y: 20,
                width: 40,
            }
        }, options);

        var text = textRenderer.createText(label || '', options);
        svgClasses(text).add('djs-label');
        svgAppend(parentGfx, text);

        return text;
    }
    //计算文字宽度
    String.prototype.pxWidth = function (font) {
        // re-use canvas object for better performance
        var canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement("canvas")),
            context = canvas.getContext("2d");

        font && (context.font = font);
        var metrics = context.measureText(this);

        return metrics.width;
    }
  //绘制自定义元素
    this.drawCustomElements = function (parentNode, element) {
        const {
            type,

        } = element // 获取到类型

        if (type !== 'label') {
            if (customElements.includes(type)) { // or customConfig[type]
                const {
                    url,
                    attr,
                    defaultName
                } = customConfig[type]
                //可以设置节点默认值
                // if (!element.businessObject.name && defaultName) {
                //     element.businessObject.name = defaultName
                // }

                const customIcon = svgCreate('image', {
                    ...attr,
                    href: url
                })
                element['width'] = attr.width //  直接修改了元素的宽高
                element['height'] = attr.height
                svgAppend(parentNode, customIcon)
                // 判断是否有name属性来决定是否要渲染出label
                // if (!hasLabelElements.includes(type) && element.businessObject.name) {
                //当类型为UserTask时,自定义绘制label标签（标签会在shape里面）
                if (type === 'bpmn:UserTask' && element.businessObject.name) {
                    const textWidth = element.businessObject.name.pxWidth('normal 13px')
                    const text = svgCreate('text', {
                        x: attr.x + (attr.width / 2 - textWidth / 1.6),
                        y: attr.y + attr.height + 15,
                        fontSize: "13px",
                        fill: "#000"
                    })
                    text.innerHTML = element.businessObject.name
                    svgAppend(parentNode, text)
                }
                // renderLabel(parentNode, element.label)

                return customIcon
            }
            const shape = this.bpmnRenderer.drawShape(parentNode, element)
            return shape
        }
    }
}

inherits(CustomRenderer, BaseRenderer)

CustomRenderer.$inject = ['eventBus', 'styles', 'textRenderer']

CustomRenderer.prototype.canRender = function (element) {
    // ignore labels
    return true
    // return !element.labelTarget;
}

CustomRenderer.prototype.drawShape = function (p, element) {
    const {
        type,
    } = element

    if (customElements.includes(type)) {
        return this.drawCustomElements(p, element)
    }
}

CustomRenderer.prototype.getShapePath = function (shape) {

}
